<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <h1>{{num}}</h1>
      <h1>{{num>5?msg:"vue实在太简单了！！！"}}</h1>
      {{fun1()}}
      <button @click="fun1('aaaa')">执行fun1</button>
      <!-- @mouseover 绑定事件 -->
      <button @click="fun2">num++</button>
    </div>

    <script src="vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#app", //实例作用的范围
        data: {
          msg: "hello world",
          num: 10,
        }, //数据，也就是放变量的地方
        methods: {
          fun1(a) {
            console.log(a);
            console.log(this.msg);
          },
          fun2() {
            this.num++;
          },
        },
        //放函数的地方,如果要在函数中使用data 要加上this
      });
      //实例化一个vue对象 里面是一个{},这个对象叫做选项对象
      // 1.el vue实例作用的元素
      // 2.data 放数据（变量的地方）
      // 3.methods 放函数（方法）的地方

      //   模版语法：就是在html中执行js代码 在{{}}中执行
    </script>
  </body>
</html>
